window.Against = (function () {

    /**
     * 主对象，所有外部操作均通过Against对象执行
     */
    var Against = {
        //容器节点
        container: document.getElementById('against'),

        //svg根节点
        svgRootDom: null,
        //svg根节点宽
        svgWidth: 0,
        //svg根节点高
        svgHeight: 0,

        //存储绘制节点对象
        allDrawDoms: [], 

        //16还是8强
        type: 0,

        //初始化容器节点样式
        initContainerDomStyle: function () {
            this.container.style.cssText = 'width:100%;';
            var boundingRect = this.container.getBoundingClientRect();
            this.svgWidth = boundingRect.width; //获取svg根节点宽度
            this.svgHeight = boundingRect.width / 1.0436137; //获取svg根节点高度
        },

        //初始化svg根节点
        initSVGRootDom: function () {
            var oSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            oSVG.setAttribute('width', this.svgWidth);
            oSVG.setAttribute('height', this.svgHeight);
            oSVG.setAttribute('viewBox', '0 0 ' + this.svgWidth + ' ' + this.svgHeight);
            oSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
            oSVG.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
            oSVG.setAttribute('id', 'svgRoot');
            this.container.appendChild(oSVG);
            this.svgRootDom = document.getElementById('svgRoot');
        },

        //初始化绘制节点
        initDrawDoms: function (mathcList) {
            var baseSVG = this.buildBase(); //构建底子
            var matchSVG = this.handleMatch(mathcList, baseSVG);
            // this.allDrawDoms = this.allDrawDoms.concat(baseSVG);
            this.allDrawDoms = this.allDrawDoms.concat(matchSVG).concat(baseSVG);

            console.log(this.allDrawDoms);
        },


        //处理对阵数据
        handleMatch: function (mathcList, baseSVG) {
            if(this.type === 16) {
                return this.handleSixteen(mathcList, baseSVG);
            } else if (this.type === 8) {
                return this.handleEight(mathcList, baseSVG);
            }
        },

        //处理16强
        handleSixteen: function (mathcList, baseSVG) {
            var temp, result = [], winPersonNodes = [], curLeafNodes = [], polylineNodes = [],
                curX, curY, dy = Against.svgHeight * .116822,
                curLeafNode1, curLeafNode2,
                winPersonNode,
                polyline1, polyline2, isleft, flag, rate;
            var QMLT = baseSVG[2], QMLB = baseSVG[4], QMRT = baseSVG[6], QMRB = baseSVG[8];
            for(var i = 0; i < mathcList.length; i += 1) {
                temp = mathcList[i];
                isleft = i < 4;
                flag = isleft ? 1 : -1;
                rate = isleft ? .2597 : .0985;
                
                if(isleft) {
                    //左半场
                    curX = Against.svgWidth * .0253731;
                } else {
                    //右半场
                    curX = Against.svgWidth * .73582;
                }

                if(i === 0 || i === 4) {
                    curY = Against.svgHeight * .02;
                } else if (i === 1 || i === 5) {
                    curY = Against.svgHeight * .2647975;
                } else if (i === 2 || i === 6) {
                    curY = Against.svgHeight * .5093
                } else if (i === 3 || i === 7) {
                    curY = Against.svgHeight * .753894;
                }

                curLeafNode1 = new LeafNode(curX, curY, temp.ONE_PIC, temp.ONE_PERSON, isleft);
                curLeafNode2 = new LeafNode(curX, curY + dy, temp.TWO_PIC, temp.TWO_PERSON, isleft);
                curLeafNodes.push(curLeafNode1, curLeafNode2);

                
                var winX = curLeafNode1.x + Against.svgWidth * flag * rate;
                var winY = curLeafNode1.y + Against.svgHeight * .0724299;
                if(temp.winPerson) {
                    //已比完，有胜者
                    winPersonNode = new QuestionMarkNode(winX, winY, temp.winPic);
                } else {
                    //未结束，无胜者
                    winPersonNode = new QuestionMarkNode(winX, winY);
                }
                winPersonNodes.push(winPersonNode);

                if(isleft) {
                    //左边
                    polyline1 = new PolyLine([winPersonNode.topPoint, Point.getTurningPoint(winPersonNode.topPoint, curLeafNode1.rightPoint), curLeafNode1.rightPoint]);
                    polyline2 = new PolyLine([winPersonNode.bottomPoint, Point.getTurningPoint(winPersonNode.bottomPoint, curLeafNode2.rightPoint), curLeafNode2.rightPoint]);
                } else {
                    //右边
                    polyline1 = new PolyLine([winPersonNode.topPoint, Point.getTurningPoint(winPersonNode.topPoint, curLeafNode1.leftPoint), curLeafNode1.leftPoint]);
                    polyline2 = new PolyLine([winPersonNode.bottomPoint, Point.getTurningPoint(winPersonNode.bottomPoint, curLeafNode2.leftPoint), curLeafNode2.leftPoint]);
                }
                polylineNodes.push(polyline1, polyline2);
            }

            for(var i = 0; i < winPersonNodes.length; i += 1) {
                if(i % 2 !== 0) {
                    var temp2 = winPersonNodes[i];
                    var temp1 = winPersonNodes[i - 1];
                    if(i === 1) {
                        polyline1 = new PolyLine([QMLT.topPoint, Point.getTurningPoint(QMLT.topPoint, temp1.rightPoint), temp1.rightPoint]);
                        polyline2 = new PolyLine([QMLT.bottomPoint, Point.getTurningPoint(QMLT.bottomPoint, temp2.rightPoint), temp2.rightPoint]);
                    } else if (i === 3) {
                        polyline1 = new PolyLine([QMLB.topPoint, Point.getTurningPoint(QMLB.topPoint, temp1.rightPoint), temp1.rightPoint]);
                        polyline2 = new PolyLine([QMLB.bottomPoint, Point.getTurningPoint(QMLB.bottomPoint, temp2.rightPoint), temp2.rightPoint]);
                    } else if (i === 5) {
                        polyline1 = new PolyLine([QMRT.topPoint, Point.getTurningPoint(QMRT.topPoint, temp1.rightPoint), temp1.leftPoint]);
                        polyline2 = new PolyLine([QMRT.bottomPoint, Point.getTurningPoint(QMRT.bottomPoint, temp2.rightPoint), temp2.leftPoint]);
                    } else if (i === 7) {
                        polyline1 = new PolyLine([QMRB.topPoint, Point.getTurningPoint(QMRB.topPoint, temp1.rightPoint), temp1.leftPoint]);
                        polyline2 = new PolyLine([QMRB.bottomPoint, Point.getTurningPoint(QMRB.bottomPoint, temp2.rightPoint), temp2.leftPoint]);
                    }
                    polylineNodes.push(polyline1, polyline2);
                }
            }
            result = polylineNodes.concat(winPersonNodes).concat(curLeafNodes);
            return result;
        },

        //处理8强数据
        handleEight: function (mathcList, baseSVG) {
            console.log(mathcList, baseSVG);
            var temp, result = [], winPersonNodes = [], curLeafNodes = [], polylineNodes = [],
                curX, curY, dy = Against.svgHeight * .17134,
                curLeafNode1, curLeafNode2,
                winPersonNode,
                polyline1, polyline2, isleft, flag, rate;
            var base = baseSVG[0];
            for(var i = 0; i < mathcList.length; i += 1) {
                temp = mathcList[i];
                isleft = i < 2;
                flag = isleft ? 1 : -1;
                rate = isleft ? .285 : .12388;

                if(isleft) {
                    //左半场
                    curX = Against.svgWidth * .04179;
                } else {
                    //右半场
                    curX = Against.svgWidth * .71791;
                }

                if(i === 0 || i === 2) {
                    curY = Against.svgHeight * .066978;
                } else if (i === 1 || i === 3) {
                    curY = Against.svgHeight * .6628;
                }

                curLeafNode1 = new LeafNode(curX, curY, temp.ONE_PIC, temp.ONE_PERSON, isleft);
                curLeafNode2 = new LeafNode(curX, curY + dy, temp.TWO_PIC, temp.TWO_PERSON, isleft);
                curLeafNodes.push(curLeafNode1, curLeafNode2);

                var winX = curLeafNode1.x + Against.svgWidth * flag * rate;
                var winY = curLeafNode1.y + Against.svgHeight * .099688;
                if(temp.winPerson) {
                    //已比完，有胜者
                    winPersonNode = new QuestionMarkNode(winX, winY, temp.winPic);
                } else {
                    //未结束，无胜者
                    winPersonNode = new QuestionMarkNode(winX, winY);
                }
                winPersonNodes.push(winPersonNode);

                if(isleft) {
                    //左边
                    polyline1 = new PolyLine([winPersonNode.topPoint, Point.getTurningPoint(winPersonNode.topPoint, curLeafNode1.rightPoint), curLeafNode1.rightPoint]);
                    polyline2 = new PolyLine([winPersonNode.bottomPoint, Point.getTurningPoint(winPersonNode.bottomPoint, curLeafNode2.rightPoint), curLeafNode2.rightPoint]);
                } else {
                    //右边
                    polyline1 = new PolyLine([winPersonNode.topPoint, Point.getTurningPoint(winPersonNode.topPoint, curLeafNode1.leftPoint), curLeafNode1.leftPoint]);
                    polyline2 = new PolyLine([winPersonNode.bottomPoint, Point.getTurningPoint(winPersonNode.bottomPoint, curLeafNode2.leftPoint), curLeafNode2.leftPoint]);
                }
                polylineNodes.push(polyline1, polyline2);
            }

            for(var i = 0; i < winPersonNodes.length; i += 1) {
                temp = winPersonNodes[i];
                switch(i) {
                    case 0:
                        polylineNodes.push(new PolyLine([base.leftTopPoint, Point.getTurningPoint(base.leftTopPoint, temp.rightPoint), temp.rightPoint]));
                        break;
                    case 1:
                        polylineNodes.push(new PolyLine([base.leftBottomPoint, Point.getTurningPoint(base.leftBottomPoint, temp.rightPoint), temp.rightPoint]));
                        break;
                    case 2:
                        polylineNodes.push(new PolyLine([base.rightTopPoint, Point.getTurningPoint(base.rightTopPoint, temp.leftPoint), temp.leftPoint]));
                        break;
                    case 3:
                        polylineNodes.push(new PolyLine([base.rightBottomPoint, Point.getTurningPoint(base.rightBottomPoint, temp.leftPoint), temp.leftPoint]));
                        break;
                    default: break;
                }
            }

            result = polylineNodes.concat(winPersonNodes).concat(curLeafNodes);
            return result;
        },

        //根据16强还是8强构建底子
        buildBase: function () {
            var result = [];
            var oRoot = new singleSVGDom('http://localhost:3000/images/t_16q_03.png');
            if(this.type === 8) {
                result.push(oRoot)
                return result;
            } else if (this.type === 16) {
                result.push(oRoot);
                var baseX = Against.svgWidth * .353731;
                var baseY = Against.svgHeight * .21028;
                var dx = Against.svgWidth * .214925;
                var dy = Against.svgHeight * .489;
                var QMLT = new QuestionMarkNode(baseX, baseY);
                var PLLT = new PolyLine([oRoot.leftTopPoint, Point.getTurningPoint(oRoot.leftTopPoint, QMLT.rightPoint), QMLT.rightPoint]);
                result.push(PLLT, QMLT);
                var QMLB = new QuestionMarkNode(baseX, baseY + dy);
                var PLLB = new PolyLine([oRoot.leftBottomPoint, Point.getTurningPoint(oRoot.leftBottomPoint, QMLB.rightPoint), QMLB.rightPoint]);
                result.push(PLLB, QMLB);
                var QMRT = new QuestionMarkNode(baseX + dx, baseY);
                var PLRT = new PolyLine([oRoot.rightTopPoint, Point.getTurningPoint(oRoot.rightTopPoint, QMRT.leftPoint), QMRT.leftPoint]);
                result.push(PLRT, QMRT);
                var QMRB = new QuestionMarkNode(baseX + dx, baseY + dy);
                var PLRB = new PolyLine([oRoot.rightBottomPoint, Point.getTurningPoint(oRoot.rightBottomPoint, QMRB.leftPoint), QMRB.leftPoint]);
                result.push(PLRB, QMRB);
            }
            return result;
        },

        /**
         * 初始化
         */
        init: function (param) {
            this.type = param && param.type ? param.type : 16; //16强还是8强
            this.initContainerDomStyle(); //初始容器节点样式
            this.initSVGRootDom(); //初始化svg根节点

            this.initDrawDoms(param.dataList); //初始化绘制节点

            var item;
            for(var i = 0; i < this.allDrawDoms.length; i += 1) {
                item = this.allDrawDoms[i];
                item.paint(this.svgRootDom); //循环调用每个绘制对象的paint函数
            }
        }
    }

    /**
     * 绘制节点类
     * 基类，提供接口
     */
    function DrawNodes () {
        return this;
    }
    DrawNodes.prototype = {
        //绘制函数接口，将对象维护的的dom插入到svg文档中
        paint: function (parent) {
            parent.appendChild(this.build());
        },
        //构建具体svgDOM
        build: function () {
            throw new Error("未实现build函数")
        }
    }

    /**
     * 坐标点类
     * @param {Number} x 坐标点横坐标
     * @param {Number} y 坐标点纵坐标
     */
    function Point(x, y) {
        this.x = x || 0;
        this.y = y || 0;
    }
    Point.getTurningPoint = function (p1, p2) {
        //要求p1 和 p2 顺序一定是p1 靠内 p2 靠外
        return new Point(p1.x, p2.y);
    }

    /**
     * 对阵图中间的图形绘制
     * @param {Object} param 参数对象
     * {x: Number, y: Number, width: Number, height: Number, src: String}
     */
    function singleSVGDom(src) {
        this.width = this.height = Against.svgWidth * 0.22388;
        this.x = Against.svgWidth / 2 - (this.width / 2);
        this.y = Against.svgHeight / 2 - (this.height / 2);
        this.src = src || '';
        this.leftTopPoint = new Point(this.x + this.width * .3, this.y + Against.svgWidth * 0.01044);
        this.rightTopPoint = new Point(this.x + this.width * .7, this.y + Against.svgWidth * 0.01044);
        this.leftBottomPoint = new Point(this.x + this.width * .3, this.y + this.height - Against.svgWidth * 0.01044);
        this.rightBottomPoint = new Point(this.x + this.width * .7, this.y + this.height - Against.svgWidth * 0.01044);
    }
    singleSVGDom.prototype = (function (o) {
        var d = new DrawNodes();
        for(var k in o) {
            d[k] = o[k]
        }
        return d;
    })({
        //构建中间图案的svg结构
        build: function () {
            var oSVGImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
            oSVGImage.setAttribute('x', this.x);
            oSVGImage.setAttribute('y', this.y);
            oSVGImage.setAttribute('width', this.width);
            oSVGImage.setAttribute('height', this.height);
            oSVGImage.href.baseVal = this.src;
            return oSVGImage;
        }
    })

    /**
     * 问号类
     * @param {Number} x 定位点横坐标
     * @param {Number} y 定位点纵坐标
     * @param {String} src 可选的国旗图标地址
     */
    function QuestionMarkNode(x, y, src) {
        this.width = this.height = Against.svgWidth * 0.07761194;
        this.r = this.width / 2;
        this.x = x || 0;
        this.y = y || 0;
        if(typeof src === 'string' && src !== '') {
            this.src = src;
        } 
        this.leftPoint = new Point(this.x, this.y + this.r);
        this.topPoint = new Point(this.x + this.r, this.y);
        this.bottomPoint = new Point(this.x + this.r, this.y + this.r * 2);
        this.rightPoint = new Point(this.x + this.r * 2, this.y + this.r);
    }
    QuestionMarkNode.prototype = (function (o) {
        var d = new DrawNodes();
        for(var k in o) {
            d[k] = o[k]
        }
        return d;
    })({
        //构建svg结构
        build: function () {
            var oG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            oG.setAttribute('class', 'questionMark');
            if(this.src) {
                var oImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
                oImage.setAttribute('x', this.x);
                oImage.setAttribute('y', this.y);
                oImage.setAttribute('width', this.width);
                oImage.setAttribute('height', this.height);
                oImage.setAttribute('rx', this.r);
                oImage.setAttribute('ry', this.r);
                oImage.href.baseVal = this.src;
                oG.appendChild(oImage);
            } else {
                var oCircle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                oCircle.setAttribute('cx', this.x + this.r);
                oCircle.setAttribute('cy', this.y + this.r);
                oCircle.setAttribute('r', this.r);
                oG.appendChild(oCircle);
                var oText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
                oText.setAttribute('x', this.x + this.r);
                oText.setAttribute('y', this.y + this.r * 1.43);
                oText.style.fontSize = Against.svgWidth * .044776 + 'px';
                oText.innerHTML = '?';
                oG.appendChild(oText);
            }
            return oG;
        }
    });

    /**
     * 叶子节点类
     * @param {Number} x 定位点横坐标
     * @param {Number} y 定位点纵坐标
     * @param {String} src 对阵国家国旗图片地址
     * @param {String} text 对阵国家名
     * @param {Boolean} type 是否是左边的叶节点
     */
    function LeafNode (x, y, src, text, type) {
        this.width = Against.svgWidth * .2388;
        this.height = this.width * 7 / 16;
        this.x = x || 0;
        this.y = y || 0;
        this.src = src;
        this.text = text;
        this.type = type;
        this.leftPoint = new Point(this.x, this.y + this.height / 2);
        this.rightPoint = new Point(this.x + this.width, this.y + this.height / 2);
    }
    LeafNode.prototype = (function (o) {
        var d = new DrawNodes();
        for(var k in o) {
            d[k] = o[k];
        }
        return d;
    })({
        //构建svg结构
        build: function () {
            var oG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            oG.setAttribute('class', 'leafNode');
            var oRect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
            oRect.setAttribute('x', this.x);
            oRect.setAttribute('y', this.y);
            oRect.setAttribute('width', this.width);
            oRect.setAttribute('height', this.height);
            oRect.setAttribute('rx', Against.svgWidth * .014925);
            oRect.setAttribute('ry', Against.svgWidth * .014925);
            oG.appendChild(oRect);
            var oImage = document.createElementNS('http://www.w3.org/2000/svg', 'image');
            oImage.setAttribute('width', this.width * .325);
            oImage.setAttribute('height', this.width * .325);
            oImage.setAttribute('y', this.y + this.height * .12857);
            oImage.href.baseVal = this.src;
            if(this.type) {
                //左边的叶节点
                oImage.setAttribute('x', this.x + this.width * .05);
            } else {
                //右边的叶节点
                oImage.setAttribute('x', this.x + this.width * .625);
            }
            oG.appendChild(oImage);
            var oText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            oText.style.fontSize = this.width * .125 + 'px';
            oText.setAttribute('y', this.y + this.height * .59517);
            oText.innerHTML = this.text;
            if(this.type) {
                //左边叶节点
                oText.style.textAnchor = 'start';
                oText.setAttribute('x', this.x + this.width * .425);
            } else {
                //右边叶节点
                oText.style.textAnchor = 'end';
                oText.setAttribute('x', this.x + this.width * .5625);
            }
            oG.appendChild(oText);
            return oG;
        }
    });

    /**
     * 折线类
     * @param {Array} points 点实例数组
     */
    function PolyLine (points) {
        if(typeof points === 'object' && points.length !== 0) {
            this.points = points;
        } else {
            throw new Error('参数points必要');
        }
    }
    PolyLine.prototype = (function (o) {
        var d = new DrawNodes();
        for(var k in o) {
            d[k] = o[k];
        }
        return d;
    })({
        //构建svg结构
        build: function () {
            var oG = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            oG.setAttribute('class', 'polyline');
            var oPolyline = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
            var pointsStr = '';
            for(var i = 0; i < this.points.length; i += 1) {
                var temp = this.points[i];
                if(i === 0) {
                    pointsStr += temp.x + ' ' + temp.y;
                } else {
                    pointsStr += ', ' + temp.x + ' ' + temp.y;
                }
            }
            oPolyline.setAttribute('points', pointsStr);
            oG.appendChild(oPolyline);
            return oG;
        }
    })

    return Against;
})();

Against.init({
    type: 8,
    dataList: [{
        "ID": 1,
        "ONE_PERSON": "俄罗斯",
        "ONE_PIC": "http://localhost:3000/images/flag.jpg",
        "TWO_PERSON": "沙特阿拉伯",
        "TWO_PIC": "http://localhost:3000/images/flag.jpg",
        "winPerson": "俄罗斯",
        "winPic": "http://localhost:3000/images/flag.jpg"
    },
    // {
    //     "ID": 2,
    //     "ONE_PERSON": "埃及",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "乌拉圭",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "埃及",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 3,
    //     "ONE_PERSON": "摩洛哥",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "伊朗",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "摩洛哥",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 36,
    //     "ONE_PERSON": "西班牙",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "摩洛哥",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 37,
    //     "ONE_PERSON": "丹麦",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "法国",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 38,
    //     "ONE_PERSON": "澳大利亚",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "秘鲁",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "澳大利亚",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 39,
    //     "ONE_PERSON": "尼日利亚",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "阿根廷",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "尼日利亚",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 40,
    //     "ONE_PERSON": "冰岛",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "克罗地亚",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "冰岛",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 41,
    //     "ONE_PERSON": "韩国",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "德国",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "韩国",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 42,
    //     "ONE_PERSON": "墨西哥",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "瑞典",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "瑞典",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 43,
    //     "ONE_PERSON": "塞尔维亚",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "巴西",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "巴西",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 44,
    //     "ONE_PERSON": "瑞士",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "哥斯达黎加",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg"
    // },
    // {
    //     "ID": 45,
    //     "ONE_PERSON": "日本",
    //     "ONE_PIC": "http://localhost:3000/images/flag.jpg",
    //     "TWO_PERSON": "波兰",
    //     "TWO_PIC": "http://localhost:3000/images/flag.jpg",
    //     "winPerson": "日本",
    //     "winPic": "http://localhost:3000/images/flag.jpg"
    // },
    {
        "ID": 46,
        "ONE_PERSON": "塞内加尔",
        "ONE_PIC": "http://localhost:3000/images/flag.jpg",
        "TWO_PERSON": "哥伦比亚",
        "TWO_PIC": "http://localhost:3000/images/flag.jpg",
        "winPerson": "哥伦比亚",
        "winPic": "http://localhost:3000/images/flag.jpg"
    },
    {
        "ID": 47,
        "ONE_PERSON": "英格兰",
        "ONE_PIC": "http://localhost:3000/images/flag.jpg",
        "TWO_PERSON": "比利时",
        "TWO_PIC": "http://localhost:3000/images/flag.jpg"
    },
    {
        "ID": 48,
        "ONE_PERSON": "巴拿马",
        "ONE_PIC": "http://localhost:3000/images/flag.jpg",
        "TWO_PERSON": "突尼斯",
        "TWO_PIC": "http://localhost:3000/images/flag.jpg",
        "winPerson": "突尼斯",
        "winPic": "http://localhost:3000/images/flag.jpg"
    }]
});